<template>
	<div id="login">
		<div class="qux" @click="quxiao">取消</div>
		<div class="box">
			<img src="@/assets/image/login/logo1.png" />
			<div class="dengl">
				<van-form @submit="onSubmit">
					<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]"
					 label-width="3.5em" />
					<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"
					 label-width="3.5em" />
					<div style="margin: 16px;">

					</div>
					<div class="btnBxo">
						<div class="btn1">注册一网通</div>
						<div class="btn2">
							<van-button block type="info" native-type="submit">提交</van-button>
						</div>

					</div>
				</van-form>
			</div>

			<div class="updatepaw">忘记密码</div>

			<div class="xuexi">同意<span>《招商银行手机银行服务协议》</span></div>
			<main-tab-item></main-tab-item>
			<van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel" @select="onSelect" />
		</div>


	</div>
</template>

<script>
	import {
		ActionSheet,
		Toast,
		Field,
		CellGroup,
		Button,
		Form
	} from 'vant';
	import MainTabItem from '@/components/MainTabItem.vue'
	export default {
		data() {
			return {
				show: false,
				actions: [{
					id: 1,
					name: '指纹登录'
				}, {
					id: 2,
					name: '手势登录'
				}, ],
				username: '',
				password: '',
			};
		},
		methods: {
			quxiao(){
				this.show = true
			},
			onCancel() {
				Toast('取消');
			},
			showPopup() {
				this.show = true
			},
			onSubmit(values) {
				console.log('submit', values);
			},

			onSelect(item) {
				if (item.id == 1) {
					this.$router.push('/login')
				} else if (item.id == 2) {
					this.$router.push('/loginshous')
				}

			},
		},
		components: {
			[ActionSheet.name]: ActionSheet,
			[Toast.name]: Toast,
			[Field.name]: Field,
			[CellGroup.name]: CellGroup,
			[Button.name]: Button,
			[Form.name]: Form,
			MainTabItem
		}
	}
</script>

<style lang="less" scoped>
	#login {
		width: 100vw;
		height: 100%;
		background-color: #E5E5E5;
		position: fixed;
		display: flex;


	}


	.box {
		text-align: center;
		margin-top: 100px;

		.qux {

			font-size: 16px;
			color: #008BDA;
		}

		img {
			width: 146px;
			height: 47px;
		}

		.dengl {
			width: 100vw;
			margin-top: 50px;
		}


		.gengduo {
			color: #0081D9;
			font-size: 14px;
			margin-top: 20px;
		}

		.btnBxo {
			display: flex;
			justify-content: space-between;
			padding: 0 15px;
			box-sizing: border-box;
			margin-top: 25px;

			.btn1 {
				width: 158px;
				height: 40px;
				border: 1px solid #007BDA;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 15px;
				color: #007BDA;
				background-color: white;
				border-radius: 4px;
			}

			.btn2 {
				width: 158px;
				height: 40px;

				/deep/.vant-button {
					border: 1px solid #007BDA;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 15px;
					color: white;
					background-color: #0074D9;
					border-radius: 4px;
				}
			}
		}

		.updatepaw {
			margin-top: 20px;
			font-size: 14px;
			color: #008BDA;
			text-align: right;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.xuexi {
			font-size: 14px;
			color: #555555;
			position: absolute;
			left: 50%;
			bottom: 60px;
			margin-left: -112px;

			span {
				color: #0044D3;
			}
		}
	}

	.popup {
		width: 100vw;
		height: 500px;
		border: 1px solid red;

	}

	.qux {
		margin: 15px;
		font-size: 16px;
		color: #008BDA;
		position: absolute;
	}
</style>
